<template>
  <div class="custom-admin-list" v-loading="loading" element-loading-text="加载中">
    <el-card class="custom-box-card">
      <div class="custom-header">
        <span class="title">
          地方美食列表
        </span>
      </div>
      <!-- 搜索 -->
      <div class="custom-form-search">
        <el-form @submit.prevent.stop :inline="true" size="mini">
          <div class="sousuo">
            <el-form-item label="美食编号">
              <el-input v-model="search.number"></el-input>
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="search.name"></el-input>
            </el-form-item>
            <el-form-item label="附近景点">
              <el-select v-model="search.attractions" style="width:90px;">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="m in attractionList" :value="m.name" :label="m.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分类">
              <el-select v-model="search.kind" style="width:90px;">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="m in foodkindList" :value="m.id" :label="m.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchSubmit" icon="el-icon-search">查询</el-button>
            </el-form-item>

          </div>
        </el-form>
      </div>
      <div class="list-table-page">
        <div class="list-table">
          <el-table border :data="list" style="width: 100%" highlight-current-row>
            <el-table-column type="index" label="#"></el-table-column> <!-- 序号 -->
            <el-table-column label="美食编号" width="130">
              <template slot-scope="{row}">
                {{ row.number }}
              </template>
            </el-table-column>
            <el-table-column label="名称">
              <template slot-scope="{row}">
                {{ row.name }}
              </template>
            </el-table-column>
            <el-table-column label="附近景点" width="80">
              <template slot-scope="{row}">
                {{ row.attractions }}
              </template>
            </el-table-column>
            <el-table-column label="分类" width="80">
              <template slot-scope="{row}">
                <e-select-view module="foodkind" :value="row.kind" select="id" show="name"></e-select-view>
              </template>
            </el-table-column>
            <el-table-column label="图片" width="150">
              <template slot-scope="{row}">
                <e-img :src="row.photo" type="list" style="max-width:120px"></e-img>
              </template>
            </el-table-column>
            <el-table-column label="人均价格" width="80">
              <template slot-scope="{row}">
                {{ row.price }}
              </template>
            </el-table-column>
            <el-table-column label="美食简介" width="200">
              <template slot-scope="{row}">
                {{ row.introduction }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{row}">
                <el-button-group>

                  <el-tooltip content="详情" placement="top">
                    <el-button @click="$goto({ path: '/admin/fooddetail', query: { id: row.id } })"   icon="el-icon-document"
                        type="primary"
                        size="mini"
                        style="background-color: rgb(123 147 190); border-color: rgb(123 147 190);"></el-button>
                  </el-tooltip>
                  <el-tooltip content="编辑" placement="top">
                    <el-button    icon="el-icon-edit-outline" @click="$goto({ path: '/admin/foodupdt', query: { id: row.id } })"
                    type="success"
                        size="mini"
                        style="background-color: rgb(147 152 154); border-color: rgb(147 152 154);"></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button  icon="el-icon-remove"
                        type="danger"
                        size="mini" @click="deleteItem(row)" style="background-color: rgb(229 79 110); border-color: rgb(229 79 110);">

                    </el-button>
                  </el-tooltip>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="custom-pagination" style="margin-top: 10px;text-align: center">
          <el-pagination @current-change="loadList" :current-page="page" :page-size="pagesize" @size-change="sizeChange"
            layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
          </el-pagination>
        </div>
      </div>




    </el-card>
  </div>
</template>
<style type="text/scss" scoped lang="scss">
.custom-admin-list {
  .custom-box-card {
    .custom-header {
      background: #7fabbe;
      margin: 15px;
      color: #fdfcfc;
      padding: 15px 20px;
      font-weight: bold;
      letter-spacing: 9px;
      border-radius: 8px;
    }

    .custom-form-search {
      padding-left: 20px;
      padding-top: 15px;
      margin-bottom: 20px;
      border-radius: 4px;

      .el-form-item__label {
        color: #333;
        font-weight: bold;
      }

      .el-button {
        background-color: #659ab1;
        color: #fff;

        &:hover {
          background-color: #b3cdd8;
          border: #b3cdd8;
        }
      }
    }

    .list-table-page {
      .list-table {
        padding: 0 20px;

        .el-table__header-wrapper {
          background-color: #f5f7fa;
        }

        .el-table__row {
          &:hover {
            background-color: #f0f0f0;
          }
        }
      }

      .custom-pagination {
        text-align: center;
        margin-top: 20px;
        padding: 0 20px;

        .el-pagination__total {
          font-size: 14px;
          color: #666;
        }

        .el-pagination__sizes .el-select-dropdown__item {
          font-size: 14px;
        }
      }
    }
  }
}

.sousuo {
  width: 100%;
}

.anniu {
  padding-top: 2.5%;
}
</style>
<script>
import api from '@/api';
import { remove, checkIssh } from '@/utils/utils';
import { extend } from '@/utils/extend';
import objectDiff from 'objectdiff';


/**
 * 后台列表页面
 */
export default {
  data() {
    return {

      loading: false,
      list: [],
      search: {

        number: '',

        name: '',

        attractions: '',

        kind: '',

      },
      total: {},
      page: 1, // 当前页
      pagesize: 10, // 页大小
      totalCount: 0, // 总行数

      attractionList: [],
      foodkindList: [],

    }
  },
  watch: {},
  computed: {},
  methods: {
    searchSubmit() {
      this.setSearchParamsToCookie();
      this.loadList(1);
    },

    sizeChange(e) {
      this.pagesize = e;
      this.setSearchParamsToCookie();
      this.loadList(1);
    },
    checkIssh,

    loadList(page) {
      // 防止重新点加载列表
      if (this.loading) return;
      this.loading = true;
      this.page = page;
      // 从 Cookie 中获取筛选条件
      var filter = this.getSearchParamsFromCookie();
      console.log('LoadList - Filter from Cookie:', filter); // 打印筛选条件
      filter.page = page.toString();
      filter.pagesize = this.pagesize.toString();

      this.$post(api.food.list, filter).then(res => {
        this.loading = false;
        if (res.code == api.code.OK) {
          extend(this, res.data);
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.loading = false;
        this.$message.error(err.message);
      });
    },
    // 删除某行方法
    deleteItem(row) {
      this.$confirm('确定删除数据？', '提示', { // 弹出 确认框提示是否要删除
        type: 'warning'
      }).then(() => {// 确定操作

        this.loading = true; // 滚动条
        this.$post(api.food.delete, {// 提交后台
          id: row.id
        }).then(res => {
          this.loading = false;
          if (res.code != api.code.OK) {
            this.$message.error(res.msg);
          } else {
            remove(this.list, row);
          }
        }).catch(err => { // 访问网络错误
          this.loading = false;
          this.$message.error(err.message)
        })
      }).catch(() => {
        // 取消操作
      })
    },
    setSearchParamsToCookie() {
      const searchParams = {
        number: this.search.number,
        name: this.search.name,
        month: this.search.month,
        page: this.page,
        pagesize: this.pagesize
      };
      this.setCookie('searchParams', JSON.stringify(searchParams), 1); // 1表示过期时间1天
      console.log('SetSearchParamsToCookie - Search Params:', searchParams); // 打印存储的筛选条件
    },

    getSearchParamsFromCookie() {
      const cookieValue = this.getCookie('searchParams');
      return cookieValue ? JSON.parse(cookieValue) : {};
    },

    setCookie(name, value, days) {
      var expires = "";
      if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
      }
      document.cookie = name + "=" + (value || "") + expires + "; path=/";
    },

    getCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
      }
      return null;
    }

  },
  // beforeRouteUpdate(to, form, next) {
  //   extend(this.search, to.query)
  //   this.loadList(1);
  //   next();
  // },
  created() {
    const searchParams = this.getSearchParamsFromCookie();
    console.log('Created - Search Params from Cookie:', searchParams); // 打印从 Cookie 中读取的筛选条件
    extend(this.search, searchParams);
    this.page = searchParams.page ? Math.floor(searchParams.page) : 1;
    this.pagesize = searchParams.pagesize ? Math.floor(searchParams.pagesize) : 10;
    this.loadList(this.page);
  },
  mounted() {
    this.setSearchParamsToCookie();
    console.log(this.list)
  },
  destroyed() {
  }
}
</script>
